{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/selectize.css' %}">
    <style>
        /* dataTables列内容居中 */
        #result > tbody > tr > td {
            text-align: center;
            word-wrap: break-word;
        }

        /* dataTables表头居中 */
        #result > thead:first-child > tr:first-child > th {
            text-align: center;
        }

        #result tbody tr td {
            word-wrap: break-word;
            word-break:break-all
        }

        #result tbody tr td:nth-child(4) {
            width: 40%;
        }

        #buttonBar button {
            margin-right: 2px;margin-bottom: 5px;
        }

    </style>
{% endblock %}

{% block content %}
    {% include 'assets/create_ipsegment.html' %}
    {% include 'assets/update_ipsegment.html' %}
    {% include 'assets/get_ipsegment.html' %}

    <div class="row" style="overflow-x: auto;">
        <div class="col-xs-12 col-lg-8 pull-left" id="buttonBar" style="margin-bottom: 3px;">
            {% if perms.assets.add_ipsegment %}
            <button class="btn btn-sm btn-info pull-left" data-toggle="modal" data-target="#createIPSegment">
                <i class="fa fa-upload"></i>
                <span class="bigger-110">新增</span>
            </button>
            {% endif %}
        </div>
        <div class="col-xs-12">
            <div class="box" style="min-width: 1100px;">
                <div class="box-body">
                    <table id="result" class="table table-bordered table-striped" style="width:100%;">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>IP网段</th>
                                <th>IP环境</th>
                                <th>有效IP数</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for result in results %}
                            <tr>
                                <td>{{ result.id }}</td>
                                <td><a data-toggle="modal" data-id="{{ result.id }}" data-target="#getIPSegment" onclick="viewIPSegmentModal(this);">{{ result.segment }}</a></td>
                                <td>{% for environment in IP_environment_  %}
                                        {% if result.IP_environment == environment.0|stringformat:'s' %}{{ environment.1 }}{% endif %}
                                    {% endfor %}
                                </td>
                                <td>{{ result.valid_IP_segment_count }}</td>
                                <td>{{ result.IP_description|default:'' }}</td>
                                <td>
                                    {% if perms.assets.change_ipsegment %}
                                    <button class="btn btn-xs btn-info" data-toggle="modal" data-id="{{ result.id }}" data-target="#updateIPSegment" onclick="openIPSegmentModal(this);">
                                        <i class="fa fa-edit"></i>
                                        <span class="bigger-110">编辑</span>
                                    </button>
                                    {% endif %}
                                    {% if perms.assets.delete_ipsegment %}
                                     <button class="btn btn-xs btn-danger" data-id="{{ result.id }}" onclick="deleteIPSegment(this);">
                                        <i class="fa fa-trash"></i>
                                        <span class="bigger-110">删除</span>
                                    </button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'js/selectize.min.js' %}"></script>
    <script>
        $(function () {
            var table1 = $('#result').DataTable({
                language: {
                   "sProcessing": "处理中...",
                   "sLengthMenu": "显示 _MENU_ 项结果",
                   "sZeroRecords": "没有匹配结果",
                   "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                   "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                   "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                   "sInfoPostFix": "",
                   "sSearch": "快速搜索:",
                   "sUrl": "",
                   "sEmptyTable": "表中数据为空",
                   "sLoadingRecords": "载入中...",
                   "sInfoThousands": ",",
                   "oPaginate": {
                       "sFirst": "首页",
                       "sPrevious": "上页",
                       "sNext": "下页",
                       "sLast": "末页"
                   },
                   "oAria": {
                       "sSortAscending": ": 以升序排列此列",
                       "sSortDescending": ": 以降序排列此列"
                   }
               },
                columnDefs: [
                    { targets: [0], visible: false},
                    { targets: [0,2,3,4,5], searchable: false},
                    { targets: [0,3,4,5], orderable: false},
                ],
                order: [[1, "asc"]],
            })
        })

        function deleteIPSegment(ele){
            var id = $(ele).attr('data-id')
            $.confirm({
                title: 'Tips',
                content: '确定要删除这些资产么？',
                type: 'red',
                buttons: {
                    Ok: function () {
                        $.ajax({
                            url: '/api/ipsegment/'+id+'/',
                            type: 'DELETE',
                            success: function () {
                                $.alert({
                                    title: 'Tips',
                                    type: 'green',
                                    content: '删除成功！',
                                })
                                var tr_obj = $('td>button[data-id='+id+']').parents('tr')
                                $('#result').DataTable().row(tr_obj).remove().draw();
                            },
                            error: function (res) {
                                $.alert({
                                    title: 'Tips',
                                    type: 'red',
                                    content: res.responseJSON.msg,
                                })
                            }
                        })
                    },
                    Cancel: function () {
                        // close
                    }
                }
            })
        }


    </script>
{% endblock %}